<template>
    <div class="app_box">
        <div class="app_box_bg">
            <div class="banner">
                <img class="banner_img" src="../../assets/img/index/banner.jpg" alt="">
            </div>
            <div class="form">
                <div class="form_box">
                    <div class="form_item">
                        <div class="form_name">姓名
                            <span>(必填)</span>:</div>
                        <div class="form_write">
                            <input class="form_input" type="text" placeholder="请输入姓名" v-model.trim="username">
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">性别</div>
                        <div class="form_write">
                            <div class="form_radio">
                                <input class="form_radio2" type="radio" name="radioname" id="man" checked="true" v-model="sex" value="man">
                                <label class="form_label" for="man">
                                    <span class="form_icon"></span>男</label>
                            </div>
                            <div class="form_radio">
                                <input class="form_radio2" type="radio" name="radioname" id="woman" v-model="sex" value="woman">
                                <label class="form_label" for="woman">
                                    <span class="form_icon"></span>女</label>
                            </div>
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">生日</div>
                        <div class="form_write">
                            <div class="form_write" @click="isToggle=!isToggle">{{rtn}}</div>
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">出生时辰</div>
                        <div class="form_write">
                            <div class="form_text">
                                <select v-model="time" class="form_select">
                                    <option v-for="item in timeList" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form_agreement">
                    <div class="agr_btn" :class="{'agr_btn_hide':!isAgreement}" @click="isAgreement=!isAgreement"></div>
                    <div class="agr_name">
                        <span @click="isAgreement=!isAgreement">已阅读并同意</span>
                        <span class="agr_color" @click="onProtocol">"个人隐私协议"</span>
                    </div>
                </div>
                <div class="form_btn" :class="{'form_btn_hide':!isAgreement}" @click="requestData">立即测算</div>
            </div>
            <!-- 测算 -->
            <div class="calc">
                <div class="calc_title">测算后您将揭晓这一生</div>
                <div class="calc_box">
                    <div class="calc_item"><img src="../../assets/img/index/icon_1.png" alt=""></div>
                    <div class="calc_item"><img src="../../assets/img/index/icon_2.png" alt=""></div>
                    <div class="calc_item"><img src="../../assets/img/index/icon_3.png" alt=""></div>
                    <div class="calc_item"><img src="../../assets/img/index/icon_4.png" alt=""></div>
                    <div class="calc_item"><img src="../../assets/img/index/icon_5.png" alt=""></div>
                </div>
                <div class="circle">
                    <div class="table">
                        <div class="cell">
                            <div class="circle_item">
                                <div class="circle_img"><img src="../../assets/img/index/hor-1.png" alt=""></div>
                                <div class="circle_name">八字命卦</div>
                                <div class="circle_desc">透视整年命运起伏</div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="circle_item">
                                <div class="circle_img"><img src="../../assets/img/index/hor-2.png" alt=""></div>
                                <div class="circle_name">五行分析</div>
                                <div class="circle_desc">金木水火土 喜用神</div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="circle_item">
                                <div class="circle_img"><img src="../../assets/img/index/hor-3.png" alt=""></div>
                                <div class="circle_name">整年运势</div>
                                <div class="circle_desc">未来12个月</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img_1"><img src="../../assets/img/index/desGo.png" alt=""></div>
                <a href="#" class="btn_top">立即揭开命运走势></a>
                <div class="calc_title">测试用户的真实反馈</div>
                <div class="test">
                    <div class="test_box">
                        <div class="test_item">
                            <div class="test_head test_head1"></div>
                            <div class="test_text">测算内容包括了财运，婚姻感情，事业职场，健康情况，并且还有流年运势和12个月详细分析。我认为这能帮助我全面掌握流年运势！</div>
                        </div>
                        <div class="test_item">
                            <div class="test_head test_head2"></div>
                            <div class="test_text">测试3个月后我的好运终于来了，挣钱了，发财了，家人的身体都很健康，还找到了心仪的对象，真的太准了！</div>
                        </div>
                    </div>
                </div>
                <div class="img_1"><img src="../../assets/img/index/dsGoy.png" alt=""></div>
                <a href="#" class="btn_top">预测我的未来发展></a>
                <div class="calc_title">喜用神对命运的重大影响</div>
                <div class="gold">
                    <div class="gold_box">
                        <div class="gold_item"><img src="../../assets/img/index/user3.png" alt=""></div>
                        <div class="gold_item"><img src="../../assets/img/index/user4.png" alt=""></div>
                        <div class="gold_item"><img src="../../assets/img/index/user5.png" alt=""></div>
                    </div>
                </div>
                <div class="img_1"><img src="../../assets/img/index/dsGoo.png" alt=""></div>
                <div class="desc">五行之间总有刑冲克害，需要用神，使命局达到平衡<br>用神选得准，制凶助吉，防灾免灾，富贵荣身<br>用神既为贵人，与之来往会多得其助。</div>
                <a href="#" class="btn_top">查看我的喜用神></a>
                <div class="calc_title">如何正确规避人生的低潮</div>
                <div class="predict">
                    <div class="predict_box">
                        <div class="predict_item">
                            <div class="predict_title">预测前</div>
                            <!-- kuang.png -->
                            <div class="predict_img"><img src="../../assets/img/index/gongMano.png" alt=""></div>
                            <div class="predict_con">
                                <div class="predict_icon">不知今生是富是穷</div>
                                <div class="predict_icon">不知姻缘是好是坏</div>
                                <div class="predict_icon">不知财运是多是少</div>
                                <div class="predict_icon">不知今年运势如何</div>
                            </div>
                        </div>
                        <div class="predict_item">
                            <div class="predict_title predict_color">预测后</div>
                            <!-- kuang.png -->
                            <div class="predict_img"><img src="../../assets/img/index/gongMant.png" alt=""></div>
                            <div class="predict_con">
                                <div class="predict_icon predict_color">算出一生荣华富贵</div>
                                <div class="predict_icon predict_color">算出今世姻缘感情</div>
                                <div class="predict_icon predict_color">算出一生财运情况</div>
                                <div class="predict_icon predict_color">获取12个月运势</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img_1"><img src="../../assets/img/index/dsGoT.png" alt=""></div>
                <a href="#" class="btn_top" style="margin-bottom:0;">预测改变一生命运></a>
                <div class="img_1"><img src="../../assets/img/index/dsGoS.png" alt=""></div>
                <div class="desc">专业命盘精论，掌握一生好运秘诀：一次掌握十年大运、桃花婚姻、财运工作、健康家庭等运势的吉凶变化。 为你点出八字旺弱、五行喜忌，助你调整方向大展身手，如鱼得水。</div>
                <a href="#" class="btn_top" style="margin-bottom:0;">立即测算></a>
                <!-- end -->
            </div>
            <div class="other">
                <!-- <div class="other_msg" @click="onBbs">给大师留言，咨询更多问题
                    <span>></span>
                </div> -->
                <!-- <div class="other_other">全国客服电话
                    <a href="tel:400-870-0973">400-870-0973</a>
                </div> -->
                <div class="other_item">客服QQ：{{global.qq}}</div>
                <!-- <div class="other_item">客服邮箱：fuwu@taibai123.com</div> -->
                <!-- <div class="other_item">客服工作时间：周一至周五 9:00-18:00</div> -->
                <div class="other_icon">世界顶级八字专家团队典鹿全力打造</div>
            </div>
            <div class="btn_go">
                <div class="btn_go_text" :class="{'form_btn_hide':!isAgreement}" @click="requestData">立即测算</div>
            </div>
            <!-- 弹框 -->
            <div class="date" v-show="isToggle">
                <div class="date_bg" @click="isToggle=false"></div>
                <div class="date_box">
                    <div class="date_info">
                        <mt-button type="default" size="small" @click="isToggle=false">取消</mt-button>
                        <mt-switch v-model="isSwitch" @change="onSwitchChange">{{isSwitch?'农历':'公历'}}</mt-switch>
                        <mt-button type="primary" size="small" @click="onBtnOk">确定</mt-button>
                    </div>
                    <div class="date_picker">
                        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
                    </div>
                </div>
            </div>
            <!-- 固定广告 -->
           <!--  <div class="fixed_box">
                <div class="fixed_item" @click="onAdvert">
                    <div class="fixed_icon fixed_icon_1"></div>
                    <div class="fixed_name">测算历史</div>
                </div>
            </div> -->
        </div>
        <!-- 历史记录提醒弹框 -->
        <div class="history" v-show="isHistory">
            <div class="history_bg"></div>
            <div class="history_box">
                <div class="history_shut" @click="isHistory=false"></div>
                <div class="history_title">重复支付提醒</div>
                <div class="history_warning">检测到您存在历史记录，是否跳转！重复提交会覆盖历史记录！</div>
                <div class="history_btn" @click="historyBtn">查看结果</div>
            </div>
        </div>
    </div>
</template>
<script>
import obj from './date'
import { Toast,Indicator } from 'mint-ui'
import axios from 'axios';
import qs from 'qs';
const { yearArr, monthArr1, monthArr2, dayArr1, dayArr2, time } = obj
export default {
    name: 'index',
    data() {
        return {
            username: '',
            sex: 'man',
            time: 1,
            timeList: time,
            isAgreement: true,
            rtn: '公历 1990年1月1日',
            isToggle: false,
            isSwitch: false,
            values: [],
            slots: [
                {
                    flex: 1,
                    values: yearArr,
                    textAlign: 'center',
                    defaultIndex: yearArr.indexOf('1990年')
                },
                {
                    flex: 1,
                    values: monthArr1,
                    textAlign: 'center',
                    defaultIndex: 0
                },
                {
                    flex: 1,
                    values: dayArr1,
                    textAlign: 'center',
                    defaultIndex: 0
                }
            ],
            global:this.$global,
            isHistory:false,
        }
    },
    methods: {
        // 广告
        onAdvert(){
            this.$router.push({
                path: '/advert'
            })
        },
        // 留言
        onBbs() {
            this.$router.push({
                path: '/bbs'
            })
        },
        // 协议
        onProtocol() {
            this.$router.push({
                path: '/protocol'
            })
        },
        // 立即测算
        requestData() {
            if(!this.isAgreement){
                return false;
            }
            const [username, sex, rtn, time] = [
                this.username,
                this.sex,
                this.rtn,
                this.time
            ]
            // 检测
            if (!username) {
                Toast('姓名不能为空!')
                return false
            }
            if (!rtn) {
                Toast('生日不能为空!')
                return false
            }
            // 性别处理
            const sexRtn = sex=='man'?1:2;
            // 年月日处理
            const [y,m,d] = this.values;
            const year = y.slice(0,-1);
            let month = 1;
            let day = 1;
            if(this.isSwitch){
                // 农历 monthArr2 dayArr2
                month = monthArr2.indexOf(m)+1;
                day = dayArr2.indexOf(d)+1;
            }else{
                // 公历 monthArr1 dayArr1
                month = monthArr1.indexOf(m)+1;
                day = dayArr1.indexOf(d)+1;
            }
            // 时间处理
            const timeRtn = Number(time)+1;
            // console.log(sexRtn,year,month,day,timeRtn)
            const user = {
                name:username,
                date:this.values.join(''),
                time:this.timeList[timeRtn].name,
                sex:sex=='man'?'男':'女',
                calendar:this.isSwitch?'农历':'公历',
            };
            const data = {
                name: username,
                year: year,
                month: month,
                day: day,
                sex: sexRtn,
                hour: timeRtn,
            }
            this.onSubmit(data,user);
        },
        // 提交数据
        onSubmit(data,user){
            Indicator.open({
              text: '加载中...',
              spinnerType: 'fading-circle'
            });
            const {env,addOrder}=this.$addr;
            axios.post(`${env}${addOrder}`, qs.stringify(data))
              .then( response=> {
                const {code,message,data:{order_id}}=response.data;
                Indicator.close();
                if(code==0){
                    // 离线缓存订单id和时间戳，缓存时间为半小时
                    localStorage.setItem('order_id',order_id);
                    localStorage.setItem('time_stamp',Date.now());
                    localStorage.setItem('user_data',JSON.stringify(user));
                    localStorage.setItem('is_order',false);
                    // 成功
                    // console.log(order_id,user)
                    // return false;
                    this.$router.push({
                        path:'/pay',
                        query:{
                            id:order_id,
                            user:user,
                        }
                    })
                }else{
                    // 其他
                    Toast(message);
                }
              })
              .catch( error=> {
                Indicator.close();
                console.log(error);
              });
        },
        // 日历切换
        onSwitchChange() {
            let is = this.isSwitch
            if (this.isSwitch) {
                // 农历
                this.slots[1].values = monthArr2
                this.slots[2].values = dayArr2
            } else {
                // 公历
                this.slots[1].values = monthArr1
                this.slots[2].values = dayArr1
            }
        },
        // 获得年月日
        onValuesChange(picker, values) {
            this.values = values
        },
        // 确定
        onBtnOk() {
            const arr = ['公历', '农历']
            const rtn = `${arr[Number(this.isSwitch)]} ${this.values.join('')}`
            this.rtn = rtn
            this.isToggle = false
        },
        // 跳转历史记录
        historyBtn(){
            const user_data = localStorage.getItem('user_data');
            const order_id = localStorage.getItem('order_id');
            this.$router.push({
                path:'payover',
                query:{
                    id:order_id,
                    user:user_data,
                }
            })
        },
        // 检测历史记录
        onHistoryTest(){
            // 初始化检测用户是否存在历史记录
            const user_data = localStorage.getItem('user_data');
            const order_id = localStorage.getItem('order_id');
            // const is_order = localStorage.getItem('is_order')=='true';
            // 请求订单是否支付成功
            const {env,query}=this.$addr;
            axios.get(`${env}${query}`,{
                params: {
                  order_bid:order_id,
                }
              })
              .then(response=>{
                console.log(response)
                const {code}=response.data;
                if(code==0){
                    // 成功
                    // this.isHistory = true;
                    // user
                    const {name,date,time,sex,calendar}=JSON.parse(user_data);
                    const sexRtn = sex=='男'?'man':'woman';
                    const calendarRtn = calendar=='农历'?true:false;
                    this.username = name;
                    this.sex = sexRtn;
                    this.isSwitch = calendarRtn;
                }
              })
            console.log(user_data,order_id)
        },
    },
    created() {
        // this.onHistoryTest();
    }
}
</script>
<style scoped>
@import url('./base.css');
</style>
